<template>
  <div class="slider" ref="slider">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img  src="../../assets/images/banner.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img  src="../../assets/images/banner.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img  src="../../assets/images/banner.jpg" alt="Third slide">
    </div>
  </div>
  <!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" style="margin-top: -60px;" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a> -->
</div>
  </div>


 
  
</template>
<script type="text/ecmascript-6">
export default {
  data() {
    return {
      dots: [
      ],
      currentPageIndex: 0,
      children: '',
    };
  },
  props: {
    loop: {
      type: Boolean,
      default: true
    },
    autoPlay: {
      type: Boolean,
      default: true
    },
    interval: {
      type: Number,
      default: 4000
    }
  },
  mounted() {
    setTimeout(() => {
      this._setSliderWidth();
      this._initDots();
      this._initSlider();
      if (this.autoPlay) {
        this._play();
      }
    }, 20); // 保证DOM被渲染，做了20ms的延时(*为何值为20？？* 因为浏览器刷新时间一般为17ms一次)
    window.addEventListener("resize", () => {
      if (!this.slider) {
        return;
      }
      this._setSliderWidth(true);
      this.slider.refresh();
    });
  },
  methods: {
    _setSliderWidth(isResize) {
      this.children = this.$refs.sliderGroup.children;
      let width = 0;
      // slider 可见宽度
      let sliderWidth = this.$refs.slider.clientWidth;
      for (let i = 0; i < this.children.length; i++) {
        let child = this.children[i];
        // 设置每个子元素的样式及高度
        addClass(child, "slider-item");
        child.style.width = sliderWidth + "px";
        // 计算总宽度
        width += sliderWidth;
      }
      // 循环播放首尾各加一个,因此总宽度还要加两倍的宽度
      if (this.loop && !isResize) {
        width += 2 * sliderWidth;
      }
      this.$refs.sliderGroup.style.width = width + "px";
    },
    _initSlider() {
      this.slider = new BScroll(this.$refs.slider, {
        scrollX: true,
        scrollY: false,
        momentum: false,
        snap: {
          loop: this.loop, // 循环
          threshold: 0.3,
          speed: 400 // 轮播间隔
        }
        // click:true
      });
      // 监听滚动结束时间获取pageX
      this.slider.on("scrollEnd", () => {
        let pageIndex = this.slider.getCurrentPage().pageX;
        this.currentPageIndex = pageIndex;
        if (this.autoPlay) {
          this._play();
        }
      });
      this.slider.on("beforeScrollStart", () => {
        if (this.autoPlay) {
          clearTimeout(this.timer);
        }
      });
    },
    _initDots() {
      // 长度为n的空数组
      this.dots = new Array(this.children.length);
    },
    _play() {
      // currentPageIndex为不含首尾副本的索引，因此若有循环要+2
      this.timer = setTimeout(() => {
        let pageIndex = this.currentPageIndex + 1;
        if (pageIndex === 4) {
          this.currentPageIndex = 0;
          pageIndex = 0;
        }
        this.slider.goToPage(pageIndex, 0, 400);
      }, this.interval);
    }
  },
  // 生命周期destroyed销毁清除定时器，有利于内存释放
  destroyed() {
    clearTimeout(this.timer);
  }
};
</script>
<style lang="scss" scoped>
.slider {
  width: 100%;
  min-height: 1px;
  position: relative;
  .slider-group {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    .slider-item {
      float: left;
      box-sizing: border-box;
      overflow: hidden;
      text-align: center;
      height: 350px;
      overflow: hidden;
      img {
        width: 550px;
        height: 380px!important;
      }
      .w-100{
        width:550px!important;
        height: 380px!important;
      }
    }
  }
  .carousel-item {
       width: 550px;
        height: 380px!important;
    img{
      width: 550px;
        height: 380px!important;
    }
  }
 
  .dots {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 50px;
    text-align: center;
    font-size: 0;
    .dot {
      display: inline-block;
      margin: 0 6px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: white;
    }
    .active {
      width: 30px;
      border-radius: 5px;
    }
  }
}
.carousel-indicators{
    width: 390px;
        // height: 380px!important;
    li{
        width: 10px;
    height: 10px;
    margin: 0 8px;
    background-color: #fff;
    border-radius: 100%;
    }
    .active{
        background: #fdb300;
    }
}
</style>
